<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>pull示范-注册页面</title>
    <style>
        /* 通配符 */
        /* 给网页中所有标签内置的外边距和内边距清零 */
        *{
            margin:0;
            padding:0;
        }
        body{
            width:100vw;/* vw:屏幕的宽 */
            height:100vh;/* vh:屏幕的高 */
            background:url('../img/login.jpg')no-repeat fixed center center/100% 100%;
        }
        img{
            position:absolute;
            left:30px;
            top:50px;
        }
        .bth{
            position:absolute;
            right:30px;
            top:50px;
        }
        .bth a{
            display:inline-block;
            width:80px;
            height:30px;
            border:1px solid #fff;
            border-radius:20px;
            text-align:center;
            line-height:30px;
            font-size:18px;
            color:#fff;
            text-decoration:none;
            width:100px;
            margin-left:10px;
        }
        .login{
            width:500px;
            height:600px;
            border:1px solid #fafafa;
            background-color:#fafafa;
            border-radius:20px; /* 圆角 */
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
        }
        .box{
            width: 30rem;
            height: 17.125rem;
            margin: auto;
        }
        .box-1{
            width: 23.75rem;
            height: 1.875rem;
            margin: auto;
            margin-top: 0;
            font-size: 1.5rem;
            line-height: 1.5rem;
            font-weight: bold;
            color: #5bc0de;
            padding: 40px 0;
            text-align: left;
        }
        .box-2{
            width: 23.75rem;
            height: 6.5rem;
            margin: auto;
        }
        .box-2 input{
            width: 20.75rem;
            height: 1.5rem;
            padding: 10px 0 10px 46px;
            border: 1px solid #e6e6e6;
            border-radius: 6.25rem;
            margin-bottom: 1rem;
            outline: none;
        }
        .box-2 input:focus{
            border: #FA9111 1px solid;
        }
        .box3{
            overflow: hidden;
            width: 23.75rem;
            height: 1.1875rem;
            font-size: 14px;
            color: #666666;
            margin: auto;
            margin-top: 1.625rem;
            margin-bottom: 1.0625rem;
        }
        .box3 a{
            font-size: 14px;
            float: right;
            text-decoration: underline;
            color: #333333;
        }
        .box2{
            width: 33rem;
            height: 14.9375rem;
        }
        .box2-1{
            width: 23.75rem;
            height: 2.875rem;
            font-size: 20px;
            text-align: center;
            line-height: 2.875rem;
            border-radius: 100px;
            color: #FFFFFF;
            background-color: #5bc0de;
            margin: auto;
            margin-top: 1.25rem;
            border: none;
        }
        .box2-2{
            width: 23.75rem;
            height: 1.5rem;
            text-align: center;
            margin: 1rem auto 1.625rem;
        }
        .box2-2 a{
            font-size: 18px;
            text-decoration: none;
            color: #fa911e
        }
        .box2-3{
            width: 23.75rem;
            font-size: 14px;
            color: #CCCCCC;
            margin: auto;
            margin-bottom: 5px;
            border-top: 1px solid #CCCCCC;
        }
        .text1{
            position: relative;
            top: -11px;
            font-style: normal;
            padding: 0 6px;
            background-color: #FFFFFF;
            margin-left: 39.5%;
        }
    </style>
</head>
<body>
<div class="bth">
    <a href="login.html">登录</a>
    <a href="index.html" class="bth1">返回首页</a>
</div>
<div class="login">
    <div class="box">
        <div class="box-1">微型购物网站注册</div>
        <div class="box-2">
            <form>
                <input type="text" placeholder="请输入用户名" />
                <input id="input2" type="password" placeholder="请输入密码" />
                <input type="text" placeholder="请再次输入密码" />
                <input type="text" placeholder="请输入Email" />
            </form>
        </div>
    </div>
    <br><br><br><br>
    <div class="box3" align="center">
        <input type="checkbox" />点击同意用户安全协议
        <a href="#">点击了解用户安全协议</a>
    </div>
    <div class="box2">
        <a href="#" style="text-decoration: none;color: #5bc0de"><div class="box2-1">注册</div></a>
        <div class="box2-2">
            <a href="login.html">去登录</a>
        </div>
        <div class="box2-3">
            <em class="text1" style="color: #888888;">第三方登录/注册</em>
        </div>
    </div>
</div>
</body>
</html>
